<template>
  <search @search="handleSearch" @reset="handleReset">
    <div style="display: flex">
      <SearchInput searchText="Organization">
        <a-input v-model:value="searchList.organization" />
      </SearchInput>
      <SearchInput searchText="Client Name">
        <a-input v-model:value="searchList.clientName" />
      </SearchInput>
      <SearchInput searchText="URL">
        <a-input v-model:value="searchList.url" />
      </SearchInput>
      <SearchInput searchText="Status">
        <a-select v-model:value="searchList.status" :get-popup-container="triggerNode => triggerNode.parentNode">
          <a-select-option :value="1"> All </a-select-option>
          <a-select-option :value="11"> Existing </a-select-option>
        </a-select>
      </SearchInput>
    </div>
  </search>
  <e-container style="margin-top: 24px">
    <a-spin :spinning="loading" tip="Loading...">
      <a-table
        :columns="columns"
        :data-source="data"
        class="ant-table-striped"
        :pagination="false"
        :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
        @change="sortChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operate' && hasEditPermission">
            <span style="cursor: pointer; color: #3c6cfe" @click="changeOrganization(record)">
              <e-icon type="edit" style="margin-top: 5px; margin-right: 4px" />
              <span>Change Organization</span>
            </span>
          </template>
        </template>
        <template #emptyText>
          <e-empty>
            <template #description>
              <div>No Data</div>
            </template>
          </e-empty>
        </template>
      </a-table>
    </a-spin>
    <div v-if="total > 0" class="pagination">
      <a-pagination
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        show-less-items
        :show-size-changer="false"
        show-quick-jumper
        @change="changeSize"
      />
    </div>
  </e-container>

  <Modal v-model:visible="orVisible" :clientId="clientId" :type="type" @cancel="handleOrCancel" @getList="getList" />
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import EIcon from '@/components/EIcon.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
import Modal from './components/Modal.vue'
import pageColumns from '@/assets/script/page_columns.js'
import others from '@/api/others'
const store = useStore()
const hasEditPermission = computed(() => store.getters['user/isPrimaryCSO'] || store.getters['user/isSalesSupport'])
const columns = reactive(pageColumns.throughCustomer)
const data = ref([])
const current = ref(1)
const pageSize = ref(10)
const total = ref(0)
const sort = ref('')
const order = ref('')
const type = ref(0)
const clientId = ref()
const loading = ref(false)
const orVisible = ref(false)
const searchList = reactive({
  organization: '',
  clientName: '',
  url: '',
  status: 1
})
/**
 * 获取列表
 */
const getList = () => {
  loading.value = true
  others
    .getClientPage({
      organizationName: searchList.organization.trim(),
      clientName: searchList.clientName.trim(),
      url: searchList.url.trim(),
      status: searchList.status,
      page: {
        pageRows: pageSize.value,
        pageIndex: current.value,
        sort: sort.value,
        order: order.value,
        total: 0
      }
    })
    .then(res => {
      if (res.code === 2000) {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].key = i
        }
        data.value = res.data
        total.value = res.total
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 切换页码
 * @param cur
 */
const changeSize = cur => {
  current.value = cur
  getList()
}
/**
 * 搜索
 */
const handleSearch = () => {
  current.value = 1
  getList()
}
/**
 * 清空
 */
const handleReset = () => {
  searchList.organization = ''
  searchList.clientName = ''
  searchList.url = ''
  searchList.status = 1
  handleSearch()
}
/**
 * 取消模态框
 */
const handleOrCancel = () => {
  orVisible.value = false
  type.value = 0
}

/**
 * 排序
 * @param p
 * @param f
 * @param s
 */
const sortChange = (p, f, s) => {
  if (s.order === 'ascend') {
    order.value = 'asc'
    sort.value = 'ParentID'
  } else if (s.order === 'descend') {
    order.value = 'desc'
    sort.value = 'ParentID'
  } else {
    order.value = ''
    sort.value = ''
  }
  getList()
}
/**
 * 修改组织弹窗
 * @param item
 */
const changeOrganization = item => {
  type.value = 1
  clientId.value = item.id
  orVisible.value = true
}
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
@import '@/assets/style/reset_form';
</style>
<route lang="yaml">
name: Client View
path: '/organization/client-view'
meta:
  sort: 1
  roles: isPrimaryCSO, isSalesSupport
</route>
